<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值表达式{{}}</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
</div>



            <script type="text/javascript">
                var vm = new Vue({
                   el: '#app',
                    data: {
                        message: "we are 伐木累!"
                    },
                    methods:{},

                    beforeCreate: function () {
                        console.group('beforeCreate 创建前状态===============》');
                        console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                        console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
                        console.log("%c%s", "color:red", "message: " + this.message)
                    },
                    created() {
                        console.group('created 创建完毕状态===============》');
                        console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                        console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                        console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
                    },
                    beforeMount: function () {
                        console.group('beforeMount 挂载前状态===============》el');
                        console.log(this.$el);
                        console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                        console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
                    },
                    mounted: function () {
                        console.group('mounted 挂载结束状态===============》');
                        console.log(this.$el);
                        console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                        console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
                    },
                    beforeUpdate: function () {
                        console.log('beforeUpdate 即将更新渲染=');
                        console.log("%c%s", "color:red", "el     : " + this.$el);
                        console.log(this.$el);
                        console.log("%c%s", "color:red", "data   : " + this.$data);
                        console.log(this.$data);
                        console.log("%c%s", "color:red", "message: " + this.message);

                    },
                    updated: function () {
                        console.group('updated 更新完成状态===============》');
                        console.log("%c%s", "color:red", "el     : " + this.$el);
                        console.log(this.$el);
                        console.log("%c%s", "color:red", "data   : " + this.$data);
                        console.log(this.$data);
                        console.log("%c%s", "color:red", "message: " + this.message);

                    },
                    beforeDestroy: function () {
                        console.group('beforeDestroy 销毁前状态===============》');
                        console.log("%c%s", "color:red", "el     : " + this.$el);
                        console.log(this.$el);
                        console.log("%c%s", "color:red", "data   : " + this.$data);
                        console.log("%c%s", "color:red", "message: " + this.message);
                    },
                    destroyed: function () {
                        console.group('destroyed 销毁完成状态===============》');
                        console.log("%c%s", "color:red", "el     : " + this.$el);
                        console.log(this.$el);
                        console.log("%c%s", "color:red", "data   : " + this.$data);
                        console.log("%c%s", "color:red", "message: " + this.message)
                    }
                })

                vm.$destroy();
         // vm.$mount("#app")
            </script>

</body>
</html>